<template>
  <div class="home">
    <input type="text" v-model="word" @keyup.enter="add" />
    <h2>进行中</h2>
    <div>
      <div v-for="item of running" :key="item.word" @click="toDone(item)">
        <input type="checkbox" v-model="item.checked" />
        {{ item.word }}
      </div>
    </div>
    <h2>已完成</h2>
    <div v-for="item of done" :key="item.word" @click="toRun(item)">
      <input type="checkbox" v-model="item.checked" />
      {{ item.word }}
    </div>
  </div>
</template>

<script>
import { setLocalStroage, getLocalStroage } from "../assets/js/storage";
export default {
  name: "Home",
  data() {
    return {
      running: [],
      word: "",
      done: [],
    };
  },
  methods: {
    add() {
      var obj={
        word:this.word,
        check:false,
      }
      var s = this.running.findIndex(item=> item.word==obj.word);
      console.log(s);
        if (s==-1) {
          this.running.unshift(obj);
        } 
        //   else {
        //   var index = this.running.indexOf(item);
        //   this.running.splice(index, 1);
        //   this.running.unshift({ checked: false, word: this.word });
        // }
      this.word = "";
      setLocalStroage("run", this.running);
    },
    toDone(val) {
      val.checked = !val.checked;
      var index = this.running.indexOf(val);
      this.running.splice(index, 1);
      this.done.push(val);
      setLocalStroage("run", this.running);
      setLocalStroage("done", this.done);
    },
    toRun(val) {
      val.checked = !val.checked;
      var index = this.done.indexOf(val);
      this.done.splice(index, 1);
      this.running.push(val);
      setLocalStroage("run", this.running);
      setLocalStroage("done", this.done);
    },
  },
  mounted() {
    console.log(getLocalStroage("run"));
    this.running = getLocalStroage("run") ? getLocalStroage("run") : [];
    this.done = getLocalStroage("done") ? getLocalStroage("done") : [];
  },
};
</script>
